<template>
    <el-table :data="tableData" style="width: 100%" header-row-class-name="center-text">
        <el-table-column prop="answer_user" label="考生" width="120" />
        <el-table-column prop="test_paper" label="试卷" width="120" />
        <el-table-column prop="create_time" label="考试时间" width="180" />
        <el-table-column prop="score" label="分数" width="180">
            <template #default="scope">
                <el-text v-for="(value, key) in JSON.parse(scope.row.score)" type="default">{{ key + ': ' + value }}
                </el-text>
            </template>
        </el-table-column>
        <el-table-column prop="is_corrected" label="是否批改" width="180">
            <template #default="scope">
                <el-text v-if="scope.row.is_corrected" type="scuess">是</el-text>
                <el-text v-else type="warning">否</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button v-if="!scope.row.is_corrected" text bg @click="download_paper(scope.row)">下载试卷</el-button>
            </template>
        </el-table-column>
        <el-table-column label="打分" width="180">
            <template #default="scope">
                <el-button v-if="!scope.row.is_corrected" @click="open_mark(scope.row)" type="primary" text
                    bg>打分</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="`正在给${now_user}打分，请确认已经查看过答题信息`" width="500" :before-close="handleClose">
        <el-input type="number" placeholder="请输入分数" v-model="score"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit_score">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { ElMessage } from 'element-plus'
import axios from '../../utils/http.js'
let temp_id = ref('')
let score = ref('')
let dialogVisible = ref(false)
let now_user = ref('')
let tableData = ref([])
const handleClose = () => {
    dialogVisible.value = false
    score.value = ''
    temp_id.value = ''
}
function open_mark(row) {
    dialogVisible.value = true
    temp_id.value = row.id
    now_user.value = row.answer_user
}
function testFunc() {
    axios({
        url: 'answer/correct_answer/',
        method: 'GET'
    }).then(res => {
        tableData.value = res.data.data
    })
}
function submit_score() {
    axios({
        url: 'answer/correct_answer/',
        method: 'put',
        data: {
            paper_id: temp_id.value,
            score: score.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('打分成功')
            dialogVisible.value = false
            score.value = ''
            temp_id.value = ''
            testFunc()
        } else {
            ElMessage.warning('打分失败')
            dialogVisible.value = false
            score.value = ''
        }
    })
}
onMounted(() => {
    testFunc()
})

function download_paper(row) {
    axios({
        url: 'answer/correct_answer/',
        method: 'POST',
        data: {
            file_id: row.file_id
        },
        responseType: 'blob'
    }).then((response) => {
        ElMessage.success('试卷获取成功')
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${row.answer_user}_${row.test_paper}_${row.create_time}.xlsx`); // 设置下载的文件名和扩展名
        document.body.appendChild(link);
        link.click();
        link.remove();
    })
        .catch((error) => {
            ElMessage.warning('试卷获取失败')
        });
}

</script>

<style scoped></style>